<template>
  <div class="records7">
    <!-- 头部 -->
    <div class="top">
      <div class="topleft">
        <el-input v-model="keywords" placeholder="请输入搜索关键字" clearable @clear="clear" />
        <el-button type="primary" @click="serach">查询</el-button>
      </div>
      <div class="topright">
        <el-button type="primary" @click="records7add">去添加</el-button>
      </div>
    </div>
    <!-- 列表部分 -->
    <div class="list">
      <TaBle :tableData="records7list" :tableColums="tableColums">
        <template #default1="scope">
          <!-- <el-popover trigger="hover">
            <el-image style="width: 60px; height: 60px" :src="imgs + scope.data.photo"/>
          </el-popover> -->
          <el-image style="width: 60px; height: 60px" :src="imgs + scope.data.photo" />
        </template>
        <template #default="scope">
          <el-button size="large" type="primary" link @click="handleEdit(scope)">编辑</el-button>
          <el-button size="large" type="danger" link @click="handleDelete(scope.data)"
            >删除</el-button
          >
        </template>
      </TaBle>
      <ElPagination
        :total="total"
        :currentPage="currentPage"
        :pageSize="pageSize"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></ElPagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import TaBle from '../../elpackage/TaBle.vue'
import ElPagination from '@/components/elpackage/El-Pagination.vue'
import { recordslist } from '../../../api/aboutfkm'
import { ref, onMounted, reactive } from 'vue'
import router from '@/router'
const keywords = ref('')
const imgs = ref('http://www.eshareedu.cn/fkm/upload/')
let total: any = ref(0)
let currentPage: any = ref(1)
let pageSize: any = ref(5)
const handleEdit = (scope: any) => {
  console.log(scope)
}
const handleDelete = (scope: any) => {
  console.log(scope)
}
const handleCurrentChange = (val: number) => {
  console.log(val)
  currentPage.value = val
  Recordslist()
}
const handleSizeChange = (val: number) => {
  console.log(val)
  pageSize.value = val
  Recordslist()
}
const serach = () => {
  Recordslist()
}
const clear = () => {
  Recordslist()
}
const tableColums = reactive([
  { prop: 'id', label: 'id', width: '60%' },
  { prop: 'title', label: '标题', width: '400px' },
  { prop: 'comment', label: '描述' },
  { prop: 'photo', label: '图片', isslot: true, slotname: 'default1' },
  { prop: 'content', label: '内容' },
  { label: '操作', isslot: true, slotname: 'default' }
])
const records7list = ref()
const Recordslist = async () => {
  let query = {
    key: keywords.value,
    typeid: '7',
    page: currentPage.value,
    psize: pageSize.value
  }
  let res: any = await recordslist(query)
  console.log(res)
  if (res.errCode !== 10000) {
    return false
  }
  records7list.value = res.data.list
  total.value = res.data.counts
}
const records7add = () => {
  router.push('/fkmmanage/recordsadd/7')
}

onMounted(() => {
  Recordslist()
})
</script>

<style scoped lang="less">
/deep/.el-pagination {
  display: flex !important;
  justify-content: center !important;
  margin-top: 2%;
  margin-bottom: 2%;
}
/deep/.el-table__header {
  height: 80px !important;
  background-color: #d9d9d9 !important;
}
/deep/.el-table__row {
  height: 80px !important;
}
@import '../../../assets/css/About Fkm/records7.less';
</style>
